<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "BarHistogram",
  props: {
    title: "",
    tableChoice: "",
    unit: "",
    universal: "",
  },
  data() {
    return {
      echartsList: [],
      isDownLoad: 0,
      list: [],
      decrementList: [],
      labelName: "",
      labelName1: "",
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
      dataArr: [],
      remarks: 1,
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
    this.remarks = this.$route.query.remarks;
    // consollog("universal", this.universal);
  },
  created() {},
  methods: {
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
    },

    async drawLine(echartsList) {
      if (echartsList != null && echartsList.length > 0) {
        let myChart = echarts.init(this.worldMapContainer);
        let dataList = echartsList[0].dataList;
        let xData = dataList.map((item) => item.create_time);
        console.log("xData", xData);
        let newData = [];
        newData.length = dataList.length;
        dataList.map((item, index) => {
          newData[index] = [
            item.closing_price,
            item.highset_price,
            item.minimum_price,
            item.opening_price,
          ];
        });
        console.log("dataList", dataList);
        let barData = dataList.map((item) => item.the_position);
        console.log("barData", barData);

        let option = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 18,
            },
            axisPointer: {
              type: "shadow",
            },
          },
          title: {
            text: this.title,
            x: "center",
            y: "top",
            textAlign: "left",
            textStyle: {
              fontSize: "22",
            },
          },
          visualMap: {
            show: false,
            seriesIndex: 1,
            dimension: 6,
            // pieces: [
            //   {
            //     value: 1,
            //     color: "#ec0000",
            //   },
            //   {
            //     value: -1,
            //     color: "#00da3c",
            //   },
            // ],
          },
          animation: false,
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              saveAsImage: { show: true },
            },
          },

          xAxis: [
            {
              data: xData,
              type: "category",
              boundaryGap: false,
              axisLine: { onZero: false },
              splitLine: { show: false },
              min: "dataMin",
              max: "dataMax",
            },

            {
              type: "category",
              gridIndex: 1,
              data: xData,
              boundaryGap: false,
              axisLine: { onZero: false },
              axisTick: { show: false },
              splitLine: { show: false },
              axisLabel: { show: false },
              min: "dataMin",
              max: "dataMax",
            },
          ],
          grid: [
            {
              left: "10%",
              right: "10%",
              bottom: 200,
            },
            {
              left: "10%",
              right: "10%",
              height: 80,
              bottom: 80,
            },
          ],
          dataZoom: [
            {
              type: "inside",
              xAxisIndex: [0, 1],
              start: 10,
              end: 100,
              // filterMode: "empty",
            },
            {
              show: true,
              xAxisIndex: [0, 1],
              type: "slider",
              bottom: 10,
              start: 10,
              end: 100,
              // filterMode: "empty",
            },
          ],
          yAxis: [
            {
              scale: true,
              splitArea: {
                show: true,
              },
            },
            {
              scale: false,
              gridIndex: 1,
              splitNumber: 2,
              axisLabel: { show: false },
              axisLine: { show: false },
              axisTick: { show: false },
              splitLine: { show: false },
            },
          ],
          series: [
            {
              type: "candlestick",
              data: newData,
              itemStyle: {
                color: "#ec0000",
                color0: "#00da3c",
                borderColor: "#8A0000",
                borderColor0: "#008F28",
              },
              encode: {
                x: 0,
                y: [1, 4, 3, 2],
              },
            },
            {
              name: "Volumn",
              data: barData,
              type: "bar",
              xAxisIndex: 1,
              yAxisIndex: 1,
              itemStyle: {
                color: "#7fbe9e",
              },
              large: true,
              encode: {
                x: 0,
                y: 5,
              },
            },
          ],
        };
        option.yAxis.name = "单位：" + this.unit;
        if (this.isDownLoad == 1) {
          option.yAxis.nameTextStyle = {
            fontSize: 60, //  字体大小
            lineHeight: 36,
            padding: [80, 15, 4, 0], //  内填充
          };
          option.xAxis.axisLabel = { fontSize: "90", lineHeight: 150 };
          option.yAxis.axisLabel = { fontSize: "90" };
          option.yAxis.axisLabel = { fontSize: "90" };
          option.legend.textStyle.fontSize = 60;
          option.legend.textStyle.fontWeight = 60;
          option.legend.itemHeight = 20;
          option.legend.itemWidth = 40;
          option.legend.icon = "rect";
          option.legend.top = 90;
          option.grid.top = 170;
          option.grid.right = 150;
          option.title.textStyle.fontSize = 90;
          option.title.textStyle.lineHeight = 90;
          option.tooltip.textStyle.fontSize = 90;
          option.series[0].label.fontSize = 90;
          option.series[1].label.fontSize = 90;
          option.series[2].label.fontSize = 90;
          option.series[3].label.fontSize = 90;
          option.series[4].label.fontSize = 90;
          option.series[5].label.fontSize = 90;
        }
        myChart.setOption(option);

        if (this.isDownLoad == 1) {
          const chartImgUrl = myChart.getDataURL({
            pixelRatio: 1,
            backgroundColor: "",
            type: "png",
          });
          setTimeout(() => {
            this.downloadFile(chartImgUrl, this.title);
          }, 1000);
        }
      }
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 900px;
}
</style>
